<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="ot" uri="http://www.ideyatech.com/tides"%>
<%@ taglib prefix="idy" tagdir="/WEB-INF/tags"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt_rt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<idy:bs-iris-header title_webpage="title.program-treatment.form">
</idy:bs-iris-header>

<div class="page-body">
	<div class="form-box-title">
		<h4>
			<c:if test="${param.action eq 'create'}">
				Create a new program treatment
			</c:if>
			<c:if test="${param.action eq 'update'}">
				Update an existing program treatment
			</c:if>
		</h4>
	</div>
	<hr/>
	<form:form id="add-treatment-form" method="POST" commandName="medicalProgramTreatment" cssClass="form-horizontal">
		<spring:bind path="medicalProgramTreatment.*">
			<c:if test="${status.error}">
				<div class='alert alert-error'>
					<strong>Oh snap!</strong><br/>
					<form:errors path="*" />
				</div>
			</c:if>
		</spring:bind>
		<div class="form-box-title"><h5>Information</h5></div>
		<div class="control-group">
			<label class="control-label">Program</label>
			<div class="controls">
				<input type="text" value="${medicalProgramTreatment.patientMedicalProgram.name}" disabled="disabled"/><span class="required-field">*</span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">Patient</label>
			<div class="controls">
				<input type="text" value="${medicalProgramTreatment.patientMedicalProgram.patient.fullName}" disabled="disabled"/><span class="required-field">*</span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">Procedure</label>
			<div class="controls">
				<form:select path="procedure">
					<form:options items="${procedures}" itemLabel="name" itemValue="id"/>
				</form:select><span class="required-field">*</span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">Performed by</label>
			<div class="controls">
				<form:select path="performedBy">
					<form:options items="${staffs}" itemLabel="prettyName" itemValue="id"/>
				</form:select><span class="required-field">*</span>
			</div>
		</div>
		<div class="control-group">
			<label class="control-label">Treatment Description</label>
			<div class="controls">
				<form:textarea path="description" cssClass="wider"/>
			</div>
		</div>
		<div class="control-group">
			<div class="controls">
				<label class="checkbox">
					<form:checkbox path="isCompleted" label="Mark as completed" id="is-completed"/>
		    	</label>
	    	</div>
    	</div>
    	<div id="is-completed-container" <c:if test='${not medicalProgramTreatment.isCompleted}'>style="display:none"</c:if>>
			<div class="control-group">
				<label class="control-label">Treatment Date</label>
				<div class="controls">
					<div class="input-append">
						<fmt:formatDate value='${medicalProgramTreatment.treatmentDate}' pattern="MM/dd/yyyy" var="treatmentDate"/>
						<input type="text" id="treatmentDate" name="transientDate" value="${treatmentDate}" autocomplete="off"/><span class="required-field">*</span>
						<span class="add-on"><i class="icon-calendar"></i></span>
					</div>
				</div>
			</div>
			
			<div class="form-box-title"><h5>Results</h5></div>
			
			<div class="control-group">
				<label class="control-label">Result</label>
				<div class="controls">
					<form:select path="resultStatus" cssClass="narrow">
						<form:options items="${resultStatuses}" itemLabel="value" itemValue="id"/>
					</form:select><span class="required-field">*</span>
				</div>
			</div>
			<div class="control-group">
				<label class="control-label">Result Description</label>
				<div class="controls">
					<form:textarea path="result" cssClass="wider"/>
				</div>
			</div>
			
			<div class="form-box-title"><h5>Prescription</h5></div>
			
			<div class="control-group">
				<label class="control-label">Prescription</label>
				<div class="controls">
					<form:textarea path="prescription.advice" cssClass="wider"/>
				</div>
			</div>
			
			<div class="form-box-title"><h5>Prescribed Medicines</h5></div>
			<div style="display: none;">
				<select id="medicines-sample">
					<option value="">--Select One--</option>
					<c:forEach var="medicine" items="${medicines}">
						<option value="${medicine.id}">${medicine.name}</option>
					</c:forEach>
				</select>
			</div>
			<div id="dynamic-field-list" class="control-group">
				<c:choose>
					<c:when test="${empty medicalProgramTreatment.prescription.prescribedMedicines}">
						<div class="dynamic-field prescribedMedicine-counter">
							<select name="prescription.prescribedMedicines[0].medicine">
								<option value="">--Select One--</option>
								<c:forEach var="medicine" items="${medicines}">
									<option value="${medicine.id}">${medicine.name}</option>
								</c:forEach>
							</select>
							
							<input type="text" name="prescription.prescribedMedicines[0].dosage" autocomplete="off" placeholder="Dosage" class="longer"/>
							<input type="hidden" name="prescription.prescribedMedicines[0].isDeleted" value="false">
							<a class="btn btn-danger btn-small remove"><i class="icon-remove icon-white"></i> Remove</a>
						</div>
					</c:when>
					<c:otherwise>
						<c:forEach items="${medicalProgramTreatment.prescription.prescribedMedicines}" var="prescribedMedicine" varStatus="status">
							<div class="dynamic-field prescribedMedicine-counter" <c:if test="${prescribedMedicine.isDeleted}">style="display: none;"</c:if>>
								<select name="prescription.prescribedMedicines[${status.index}].medicine">
									<option value="">--Select One--</option>
									<c:forEach items="${medicines}" var="medicine">
										<option value="${medicine.id}" <c:if test='${medicine.id eq prescribedMedicine.medicine.id}'>selected="selected"</c:if>>${medicine.name}</option>
									</c:forEach>
								</select>
								<input type="text" name="prescription.prescribedMedicines[${status.index}].dosage" autocomplete="off" value="${prescribedMedicine.dosage}" placeholder="Dosage" class="longer"/>
								<input type="hidden" name="prescription.prescribedMedicines[${status.index}].isDeleted" value="${prescribedMedicine.isDeleted}">
								<a class="btn btn-danger btn-small remove"><i class="icon-remove icon-white"></i> Remove</a>
							</div>
						</c:forEach>
					</c:otherwise>
				</c:choose>
			</div>
			
		
			<div class="alert alert-info alert-shorter">
				<strong>Heads up! </strong>You can add multiple prescribed medicine by clicking &nbsp;&nbsp;<a id="new-prescribedMedicine" class="btn btn-info btn-mini"><i class="icon-plus icon-white"></i> New prescribed medicine</a>
			</div>
		</div>
		<div class="control-group">
			<div class="controls">
				<input type="submit" class="btn btn-primary" value="Save"/>
				<c:if test="${param.action eq 'create'}">
					<a class="btn" href="${url_context}/patient-program.jspx?id=${medicalProgramTreatment.patientMedicalProgram.id}">Cancel</a>
				</c:if>
				<c:if test="${param.action eq 'update'}">
					<a class="btn" href="${url_context}/program-treatment.jspx?id=${medicalProgramTreatment.id}">Cancel</a>
				</c:if>
				
			</div>
		</div>
		
	</form:form>
</div>

<idy:bs-iris-footer>
	<script type="text/javascript">
		
		$(document).ready(function(){
			
			var medicinesSample = $('#medicines-sample').html();
			
			$('#new-prescribedMedicine').click(function(){
				var prescribedMedicineCounter = $('.prescribedMedicine-counter').size();
				$('#dynamic-field-list').append('<div class="dynamic-field prescribedMedicine-counter"><select name="prescription.prescribedMedicines['+prescribedMedicineCounter+'].medicine">'+medicinesSample+'</select> <input type="text" name="prescription.prescribedMedicines['+prescribedMedicineCounter+'].dosage" autocomplete="off" placeholder="Dosage" class="longer"/> <input type="hidden" name="prescription.prescribedMedicines['+prescribedMedicineCounter+'].isDeleted" value="false"><a class="btn btn-danger btn-small remove"><i class="icon-remove icon-white"></i> Remove</a></div>');
			});
			
			$('.remove').live("click", function(){
				$(this).prev().val("true");
				$(this).parent().fadeOut();
			});
			
			$('#treatmentDate').datepicker({
				maxDate: new Date
 			});
			
			$('#is-completed').click(function(){
				$('#is-completed-container').fadeIn('slow');
			});
		});
	</script>
</idy:bs-iris-footer>